<template>
   <div class="onearray">
        <search :sinfo="sinfo"></search>

        <div class="array-left">
              <ul>
                  <li v-for="(item,index) in dataonearray" v-text="item.catalogName">
                  </li>
              </ul>
        </div>
        <div class="array-right">
          <ul>
            <li v-for="(item,index) in dataonearray" >
              <div v-text="item.catalogName" class="title-1"></div>
                  <ul class="right-1">
                      <li v-for="(val,i) in item.childCatalogs[0].childCatalogs">
                            <router-link :to="{name:'shoplist', params:{catalogCode: val.catalogCode}}">
                                <span class="catalogCode" :class="val.catalogCode"></span>
                                <span class="parentCode" :class="val.parentCode"></span>
                                <span v-text="val.catalogName"></span>
                            </router-link>
                     </li>
                  </ul>
            </li>
          </ul>
        </div>
   </div>
</template>

<script>
    import search from "./search"
    export default {
      props:['dataonearray'],
      data(){
        return {
          sinfo:"当日08:00-20:00下单,一小时送达"
        }
      },
      components:{
        search
      }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
    .onearray {
      height: 100%;
      position: relative;
      overflow: auto;
    }
    .title-1 {
      margin-top: 40px;
    }
    .right-1 {
      li {
        line-height: 30px;
        margin-top: 15px;
      }
    }
   .array-left {
    position: absolute;
    top: 50px;
    left: 5px;
    bottom: 5px;
    width: 80px;
    background-color: #ccc;
   }
   .array-right {
    margin:5px 5px 0 90px;
    height: 100%;
    background-color: #ce8e8e8;
   }
   .array-right {
    li{
       
    }
   }
</style>
